<template>
	<view class="bigBox">
		<u-tabs :list="brotherCategory"  :current="index"  lineColor=red lineWidth=40 @click="click"></u-tabs>
		<view class="titile">
			<h2>{{h2}}</h2>
			<p>{{p}}</p>
		</view>
		<customList :list="list1"></customList>
	</view>
</template>

<script>
	import customList from '@/components/custom-list/custom-list.vue'
	import {
		ApiGetGoodsCategory,
		ApiGetGoodsList
	} from "@/utils/api.js"
	export default {
		data() {
			return {
				h2: "",
				p: "",
				brotherCategory: [],
				currentCategory: [],
				list1: [],
				index:""
			}
		},
		methods: {
			async ApiGetGoodsCategoryFun(e) {
				var res = await ApiGetGoodsCategory(e)
				// console.log(res);
				let {
					brotherCategory,
					currentCategory
				} = res.data
				this.brotherCategory = brotherCategory
				this.currentCategory = currentCategory
				// console.log("tab",this.brotherCategory);
			},
			async ApiGetGoodsListFun(e) {
				var res = await ApiGetGoodsList({
					categoryId: e.id,
					page: 1,
					size: 1000
				})
				// console.log(res.data.goodsList);
				this.list1 = res.data.goodsList
				this.h2 = this.brotherCategory[e.index].name
				this.p = this.brotherCategory[e.index].front_desc
			},
			async click(e) {
				this.ApiGetGoodsListFun(e)
			}
		},

		async onLoad(e) {
			console.log(e);
			this.ApiGetGoodsCategoryFun(e)
			var res = await ApiGetGoodsList({
				categoryId: this.$store.state.num,
				page: 1,
				size: 1000
			})
			// console.log(res.data.goodsList);
			this.list1 = res.data.goodsList
			// console.log("$store.index",this.$store.state.index);
			this.index=this.$store.state.index
			// console.log(this.index);
			this.h2 = this.brotherCategory[this.$store.state.index].name
			this.p = this.brotherCategory[this.$store.state.index].front_desc
		},
		components: {
			customList
		}
	}
</script>

<style lang="scss" scoped>
	.bigBox {
		.titile {
			height: 160rpx;
			text-align: center;
			background: #efefef;
			color: #333;

			h2 {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
			}

			p {
				color: #666;
				height: 60rpx;
				line-height: 60rpx;
			}
		}


	}
</style>
